<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { InfoFilled } from "@element-plus/icons-vue";
import { select } from "@/api/common/work/CourseUp";
import route from "@/router";
import { v4 as uuidv4 } from 'uuid';
import { useTokenStore } from "@/store/token.js";
import {
  insertVideo,
  insertcourseware,
  insertFileInfo,
} from "@/api/common/work/CoursePRC";
import OSS from "ali-oss";

import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
const router = useRoute();
// import type Node from "element-plus/es/components/tree/src/model/node";
import {
  getCourseById,
  selectDirectionByCourseId,
  selectProfessionalName,
  getVideoTime,
  getChpSecListById,
  increaseChapter,
  deleteSectionById,
  getChapterNameById,
  updateChapterNameById,
  increaseSection,
  deleteChapter,
  getCoursewareList,
  getVideoList,
  getFileInfoList,
  getHomeWorkList,
  deleteVideo,
  deleteCourseware,
  deleteFileInfo,
  deleteTask,
  deleteCourse,
  insertuser
} from "@/api/course/courseYf";
const client = new OSS({
  region: 'oss-cn-beijing',
  accessKeyId: 'LTAI5t72SP9uEs3mxZR89cAa',
  accessKeySecret: 'aSAPxfIZwFYzJVlwdD0KUpE9wqABJp',
  bucket: 'saas-os',
  timeout: 600 * 1000
});

const token = useTokenStore();
const courId = ref();
onMounted(() => {
  let params = router.query.courseId;
  courId.value = router.query.courseId;
  //获取课程信息
  getCourseById(params).then((res) => {
    courseTime.value = res.data.lessonHours;
    course.value = res.data; 
  });
  //获取课程方向
  selectDirectionByCourseId(params).then((res) => {
    for (let i = 0; i < res.data.length; i++) {
      textarea2.value += res.data[i].directionName + " ";
    }
  });
  //获取课程专业
  selectProfessionalName(params).then((res) => {
    professionalName.value = res.data;
  });
  //获取课程视频时长
  getVideoTime(params).then((res) => {
    videoTime.value = res.data;
  });
});

//课程信息
const course = ref({});
//课程时长
const courseTime = ref();
//课程方向
const textarea2 = ref("");
//课程专业
const professionalName = ref("");
//课程视频时长
const videoTime = ref(0);

const chapters = ref(null);

//获取当前课程的章节小节列表
const showList = () => {
  chapters.value = [];
  getChpSecListById(router.query.courseId).then((res) => {
    for (let i = 0; i < res.data.length; i++) {
      chapters.value.push({
        id: res.data[i].chapterId,
        title: res.data[i].chapterName,
        expanded: false,
        sections: res.data[i].sectionList,
      });
    }
  });
};
showList();

function toggleChapter(chapter) {
  chapter.expanded = !chapter.expanded;
}

const dataSource = ref<Tree[]>([
  {
    id: 1,
    label: "章节1",
    children: [
      {
        id: 4,
        label: "小节1",
      },
    ],
  },
]);

const isShow = ref(false);
interface Tree {
  label: string;
  children?: Tree[];
}
const height1 = document.documentElement.clientHeight - 95 - 50;
// console.log(document.documentElement.clientHeight);

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const chapterName = ref();

const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const handleNodeClick = (data: Tree) => {
  console.log(data);
};
interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}
let id = 1000;

const append = (data: Tree) => {
  const newChild = { id: id++, label: "testtest", children: [] };
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newChild);
  dataSource.value = [...dataSource.value];
};

const defaultProps = {
  children: "children",
  label: "label",
};

import type { TabsPaneContext } from "element-plus";

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const drawer = ref(false);
const showContent = ref(false);

import { Timer } from "@element-plus/icons-vue";
import { de, vi } from "element-plus/es/locale";

interface User {
  name: string;
  address: string;
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};

const tableData: User[] = reactive([]);

const push = () => {
  route.push("/course/CourseMangement");
};

const push1 = (pushMode, Id) => {
  route.push({
    path: "/work/NowAddWork",
    query: {
      sectionId: pushMode,
      courseId: Id
    }, // 序列化对象，如果需要的话
  });
};

const inputName = ref();
const delName = ref();
//新增章节对象模型
const chapter = ref({
  courseId: router.query.courseId,
  chapterName: "",
});
//新增小节对象模型
const section = ref({
  chapterId: 0,
  sectionName: "",
});
//对话框取消
const cancle = () => {
  form.name = "";
};
//对话框
const confirm = () => {
  if (chapterName.value == "新增章节") {
    if (form.name == "") {
      ElMessage.error("内容不能为空");
      return;
    } else {
      chapter.value.chapterName = form.name;
      console.log(chapter.value);
      increaseChapter(chapter.value).then((res) => {
        chapters.value = null;
        showList();
        if (res.data == "章节名称重复") {
          ElMessage.error("章节名重复");
        } else {
          ElMessage.success("新增章节成功");
        }
      });
    }
    form.name = "";
  }
  if (chapterName.value == "修改章节") {
    updateChapterNameById(nowId.value, form.name).then((res) => {
      nowId.value = null;
      form.name = "";
      chapters.value = null;
      showList();
      ElMessage.success("修改章节成功");
    });
  }
  if (chapterName.value == "新增小节") {
    if (form.name == "") {
      ElMessage.error("内容不能为空");
      return;
    } else {
      section.value.sectionName = form.name;
      increaseSection(section.value).then((res) => {
        form.name = "";
        chapters.value = null;
        showList();
        ElMessage.success("新增小节成功");
      });
    }
  }
};

//删除事件
const confirmEvent = (Id) => {
  if (delName.value == "确认删除本章节吗?") {
    deleteChapter(Id).then((res) => {
      chapters.value = null;
      showList();
      ElMessage.success("删除章节成功");
    });
  }
  if (delName.value == "确认删除本小节吗?") {
    deleteSectionById(Id).then((res) => {
      chapters.value = null;
      showList();
      ElMessage.success("删除小节成功");
    });
  }
};
const cancelEvent = () => {
  console.log("cancel!");
};

const nowId = ref();
//修改章节名字
const updateChpName = (Id: number) => {
  nowId.value = Id;
  getChapterNameById(Id).then((res) => {
    form.name = res.data;
  });
};
//新增小节
const addSection = (chapterId: number) => {
  section.value.chapterId = chapterId;
};

const video = ref({
  videoName: "",
  videoHours: 0,
  videoPath: "",
  sectionId: 1,
});
const courseware = ref({
  coursewareName: "",
  coursewarePath: "",
  sectionId: 0,
});
const fileInfo = ref({
  infoName: "",
  infoPath: "",
  sectionId: 0,
});
let currentFile = null;
let isUploading = ref(false);
let uploadProgress = ref(0);
const uuid = ref('');
const uploadFile = async (event) => {
  for(let i=0;i<event.target.files.length;i++){
 const file = event.target.files[i];
  if (file.type !== "video/mp4") {
    alert('仅支持 MP4 格式的视频文件');
    return;
  }
  if (!file) return;
  //得到视频时间
  const url = URL.createObjectURL(file);
  const videoElement = document.createElement("video");
  videoElement.src = url;
  await new Promise((resolve) => {
    videoElement.onloadedmetadata = resolve;
  });
  const duration = videoElement.duration;
  video.value.videoHours = duration; // 清理创建的对象URL
  URL.revokeObjectURL(url);
  currentFile = file;
  isUploading.value = true;
  uploadProgress.value = 0;
  video.value.videoName = file.name;
  // 对文件名进行URL编码
  uuid.value = uuidv4();
  const encodedFileName = encodeURIComponent(uuid.value + file.name);
  try {
    // 使用编码后的文件名进行上传
    const result = await client.multipartUpload(encodedFileName, file, {
      progress: (p) => {
        uploadProgress.value = Math.round(p * 100);
      },
    });
    const xb = result.res.requestUrls[0].lastIndexOf("?");
    const uurl = result.res.requestUrls[0].slice(0, xb)
    video.value.videoPath = uurl;
    addVideo(video.value);
    isUploading.value = false;
  } catch (err) {
    isUploading.value = false;
  }
  }
 
};

// function showFileChooser() {
//   const input = document.createElement("input");
//   input.type = "file";
//   input.accept = "video/*";
//   input.addEventListener("change", async function (event) {
//     console.log(event);
//     const file = this.files[0];
//     if (!file) return;

//     const url = URL.createObjectURL(file);
//     const videoElement = document.createElement("video");
//     videoElement.src = url;
//     await new Promise((resolve) => {
//       videoElement.onloadedmetadata = resolve;
//     });
//     const duration = videoElement.duration;
//     console.log(`Duration of the video is ${duration} seconds`);
//     video.value.videoHours = duration; // 清理创建的对象URL
//     URL.revokeObjectURL(url);
//   });
//   input.click();
//   input.addEventListener("change", async function () {
//     const file = this.files[0];
//     if (!file) return;

//     const formData = new FormData();
//     formData.append("file", file);

//     const xhr = new XMLHttpRequest();
//     xhr.open("POST", "/api/teacher/upload", true); // 假设你的后端API位于"/upload"
//     xhr.setRequestHeader("Authorization", token.token)
//     // 设置进度条更新函数
//     xhr.upload.addEventListener("progress", function (event) {
//       if (event.lengthComputable) {
//         const percentComplete = Math.round((event.loaded / event.total) * 100);
//         updateProgress(percentComplete);
//       }
//     });
//     xhr.onload = function () {
//       if (xhr.status === 200) {
//         const response = JSON.parse(xhr.responseText);

//         video.value.videoName = file.name;
//         video.value.videoPath = response.data; // 假设服务器返回了文件路径
//         addVideo(video.value);
//       } else {
//         console.error("Error uploading file.");
//       }
//     };
//     xhr.send(formData);
//   });
// }
// function updateProgress(percentage) {
//   const bar = document.getElementById("bar");
//   bar.style.width = percentage + "%";
// }
let currentFile1 = null;
let isUploading1 = ref(false);
let uploadProgress1 = ref(0);
const uploadFile1 = async (event) => {
  const file = event.target.files[0];
  if (file.type !== "application/pdf") {
    alert('仅支持 pdf 格式的文件');
    return;
  }
  if (!file) return;
  currentFile1 = file;
  isUploading1.value = true;
  uploadProgress1.value = 0;
  courseware.value.coursewareName = file.name;
  // 对文件名进行URL编码
  uuid.value = uuidv4();
  const encodedFileName = encodeURIComponent(uuid.value + file.name);
  try {
    // 使用编码后的文件名进行上传

    const result = await client.multipartUpload(encodedFileName, file, {
      progress: (p) => {
        uploadProgress1.value = Math.round(p * 100);
      },
    });
    const xb = result.res.requestUrls[0].lastIndexOf("?");
    const uurl = result.res.requestUrls[0].slice(0, xb)
    courseware.value.coursewarePath = uurl;
    addcourseware(courseware.value);
    isUploading1.value = false;
  } catch (err) {
    isUploading1.value = false;
  }
};




// function showFileChooserKJ() {
//   const input = document.createElement("input");
//   input.type = "file";
//   input.accept = "application/pdf";
//   input.click();
//   input.addEventListener("change", async function () {
//     const file = this.files[0];
//     if (!file) return;

//     const formData = new FormData();
//     formData.append("file", file);

//     const xhr = new XMLHttpRequest();
//     xhr.open("POST", "/api/teacher/upload", true); // 假设你的后端API位于"/upload"
//     xhr.setRequestHeader("Authorization", token.token)
//     // 设置进度条更新函数
//     xhr.upload.addEventListener("progress", function (event) {
//       if (event.lengthComputable) {
//         const percentComplete = Math.round((event.loaded / event.total) * 100);
//         updateProgresskj(percentComplete);
//       }
//     });
//     xhr.onload = function () {
//       if (xhr.status === 200) {
//         console.log("File uploaded successfully.");
//         const response = JSON.parse(xhr.responseText);

//         courseware.value.coursewareName = file.name;
//         courseware.value.coursewarePath = response.data; // 假设服务器返回了文件路径
//         addcourseware(courseware.value);
//       } else {
//         console.error("Error uploading file.");
//       }
//     };
//     xhr.send(formData);
//   });
// }
// function updateProgresskj(percentage) {
//   const bar = document.getElementById("barkj");
//   bar.style.width = percentage + "%";
// }
let currentFile2 = null;
let isUploading2 = ref(false);
let uploadProgress2 = ref(0);
const uploadFile2 = async (event) => {
  const file = event.target.files[0];
  const validExtensions = ['zip', 'rar'];
  const fileExtension = file.name.toLowerCase().split('.').pop();
  if (!validExtensions.includes(fileExtension)) {
    alert('仅支持 ZIP 和rar格式的文件');
    return;
  }
  if (!file) return;
  currentFile2 = file;
  isUploading2.value = true;
  uploadProgress2.value = 0;
  fileInfo.value.infoName = file.name;
  // 对文件名进行URL编码
  uuid.value = uuidv4();
  const encodedFileName = encodeURIComponent(uuid.value + file.name);
  try {
    // 使用编码后的文件名进行上传
    const result = await client.multipartUpload(encodedFileName, file, {
      progress: (p) => {
        uploadProgress2.value = Math.round(p * 100);
      },
    });
    const xb = result.res.requestUrls[0].lastIndexOf("?");
    const uurl = result.res.requestUrls[0].slice(0, xb)
    fileInfo.value.infoPath = uurl;
    addfileinfo(fileInfo.value);
    isUploading2.value = false;
  } catch (err) {
    isUploading2.value = false;
  }
};

// function showFileChooserZL() {
//   const input = document.createElement("input");
//   input.type = "file";
//   input.accept = "application/zip, application/x-rar-compressed";
//   input.click();
//   input.addEventListener("change", async function () {
//     const file = this.files[0];
//     if (!file) return;

//     const formData = new FormData();
//     formData.append("file", file);

//     const xhr = new XMLHttpRequest();
//     xhr.open("POST", "/api/teacher/upload", true); // 假设你的后端API位于"/upload"
//     xhr.setRequestHeader("Authorization", token.token)
//     // 设置进度条更新函数
//     xhr.upload.addEventListener("progress", function (event) {
//       if (event.lengthComputable) {
//         const percentComplete = Math.round((event.loaded / event.total) * 100);
//         updateProgresszl(percentComplete);
//       }
//     });
//     xhr.onload = function async() {
//       if (xhr.status === 200) {
//         console.log("File uploaded successfully.");
//         const response = JSON.parse(xhr.responseText);

//         fileInfo.value.infoName = file.name;
//         fileInfo.value.infoPath = response.data; // 假设服务器返回了文件路径
//         addfileinfo(fileInfo.value);
//         // ElMessage.success("上传成功"); 
//       } else {
//         console.error("Error uploading file.");
//       }
//     };
//     xhr.send(formData);
//   });
// }
// function updateProgresszl(percentage) {
//   const bar = document.getElementById("barzl");
//   bar.style.width = percentage + "%";
// }

const addVideo = async (video) => {
  let res: any = await insertVideo(video);
  if (res.code == 200) {
    ElMessage.success("上传成功");
  } else {
    ElMessage.error("上传失败")
  }
};
const addcourseware = async (video) => {
  let res: any = await insertcourseware(video);
  if (res.code == 200) {
    ElMessage.success("上传成功");
  } else {
    ElMessage.error("上传失败")
  }
};
const addfileinfo = async (video) => {
  let res: any = await insertFileInfo(video);
  if (res.code == 200) {
    ElMessage.success("上传成功");
  } else {
    ElMessage.error("上传失败")
  }
};
const pushModel = ref(0);
const sectionId = (id, chapterId) => {
  zjIdd.value = chapterId;
  pushModel.value = id;
  courseware.value.sectionId = id;
  fileInfo.value.sectionId = id;
  video.value.sectionId = id;
  sectionidd.value = id;
  isShow.value = true;
  tableData.splice(0, tableData.length);
};
const sectionidd = ref(0);
const getAllList = async () => {
  splb.splice(0, splb.length);
  kjlb.splice(0, kjlb.length);
  zllb.splice(0, zllb.length);
  zylb.splice(0, zylb.length);
  let res1 = await getVideoList(sectionidd.value);
  let res2 = await getCoursewareList(sectionidd.value);
  let res3 = await getFileInfoList(sectionidd.value);
  let res4 = await getHomeWorkList(sectionidd.value);
  res1.data.forEach((item) => {
    splb.push(item);
  });
  res2.data.forEach((item) => {
    kjlb.push(item);
  });
  res3.data.forEach((item) => {
    zllb.push(item);
  });
  res4.data.forEach((item) => {
    zylb.push(item);
  });
};

const scsp = async (id) => {
  console.log(id);
  await deleteVideo(id)
  ElMessage.success("删除成功");
  getAllList();
};

const splb = reactive([]);

const sckj = async (id) => {
  console.log(id);
  await deleteCourseware(id)
  ElMessage.success("删除成功");
  getAllList();
};

const kjlb = reactive([]);

const sczl = async (id) => {
  console.log(id);
  await deleteFileInfo(id)
  ElMessage.success("删除成功");
  getAllList();
};

const zllb = reactive([]);

const sczy = async (id) => {
  console.log(id);
  await deleteTask(id)
  ElMessage.success("删除成功");
  getAllList();
};

const zylb = reactive([]);

const zjIdd = ref(0);
const zjId = (Id) => {
  zjIdd.value = Id;
  if (sectionidd != Id) {
    sectionidd.value = 0
  }
}
//刪除课程
const open = () => {
  ElMessageBox.confirm(
    '此操作会删除该课程下的所有章节小节内容，确定删除吗？',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let res = await deleteCourse(courId.value)
      console.log(res)
      if (res.data == 101) {
        ElMessage.warning("该课程已被使用，无法删除")
      }
      if (res.data == 102) {
        ElMessage.success("删除成功");
        history.go(-1)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
//定义一个存放要修改的信息
var message=ref({});
    //测试
  const cscscs=async()=>{
    //这里报错没问题他显示的是{}里面没有这个数据名，报错但是能正常使用
    message.value.courseId=course.value.courseId;
    message.value.courseName=course.value.courseName;
     message.value.courseInfo=course.value.courseInfo;
     console.log(message);
    let aa11=  await insertuser(message.value);
    console.log(aa11);

  }
</script>

<template>
  <div class="top">
    <div class="text">
      <div class="back" @click="push">
        <img src="@/assets/img/返回.png" alt="" />
      </div>
      <span  style="font-size:30px">{{ course.courseName }}</span>
      <!-- 该功能目前没有效果 -->
      <!-- <div class="edit">
        <img src="@/assets/img/编辑.png" alt="" />
      </div>
      <div class="switch">
        <img src="@/assets/img/切换.png" alt="" />
      </div> -->
    </div>
    <div class="button">
      <button class="add" v-show="isShow" @click="(drawer = true), getAllList()">
        管理此小节
      </button>
      <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
                open
            </el-button> -->

      <button plain class="del" @click="open">删除课程</button>
      <!-- <el-button plain @click="open">删除</el-button> -->
      <!-- <button class="add">创建课程</button> -->
    </div>
  </div>

  <div class="left" :style="{ height: height1 + 'px' }">
    <div class="title" style="margin-top:0px; margin-bottom:-30px">
      <img src="@/assets/img/文件.png" alt="" />
      <span style="font-size: 20px; padding: 3px">基本信息</span>
      <!-- <span style="margin:10px 0 0 200px">新增章节</span> -->
      <!-- <el-button style="margin:10px 0 0 200px" plain
        @click="dialogFormVisible = true, chapterName = '新增章节', inputName = '章节名字'">
        新增章节
      </el-button> -->
     <el-button style="margin: 10px 0 0 170px; padding: 4px" type="primary" plain @click="
        (dialogFormVisible = true),
        (chapterName = '新增章节'),
        (inputName = '章节名字')
        ">
        新增章节
      </el-button>
    </div>

    <div class="custom-tree-container" style="margin-top: 46px">
      <div style="height: 100%">
        <ul v-for="chapter in chapters" :key="chapter.id">
          <li>
            <span @click="toggleChapter(chapter), (isShow = false), zjId(chapter.id)"
              style="cursor: pointer; font-size: 16px" :class="{ chapterstyle: chapter.id == zjIdd }">{{
                chapter.title }}
            </span>
            <span @click="toggleChapter(chapter), zjId(chapter.id)" v-if="chapter.expanded" class="arrow"
              style="font-size: 20px; cursor: pointer">▾</span>
            <span @click="toggleChapter(chapter), zjId(chapter.id)" v-else class="arrow"
              style="font-size: 20px; cursor: pointer">▸</span>
            <span class="delSection">
              <!-- <img src="@/assets/img/删除.png" alt="" style="width: 20px;cursor: pointer;"> -->
              <!-- <el-button type="danger" :icon="Delete" circle style="width: 20px;height:20px" /> -->
              <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
                :title="delName" @confirm="confirmEvent(chapter.id)" @cancel="cancelEvent">
                <template #reference>
                  <!-- <img src="@/assets/img/删除.png" alt="" style="width: 16px;cursor: pointer;"> -->
                  <el-button type="danger" :icon="Delete" circle style="width: 18px; height: 18px"
                    @click="delName = '确认删除本章节吗?'" />
                </template>
              </el-popconfirm>
            </span>
            <span class="addSection" @click="
              (dialogFormVisible = true),
              (chapterName = '修改章节'),
              (inputName = '章节名字')
              ">
              <!-- <img src="@/assets/img/编辑.png" alt="" style="width: 25px;cursor: pointer;"> -->
              <el-button type="primary" :icon="Edit" circle style="width: 18px; height: 18px"
                @click="updateChpName(chapter.id)" />
            </span>
            <span class="addSection" @click="
              (dialogFormVisible = true),
              (chapterName = '新增小节'),
              (inputName = '小节名字')
              ">
              <img src="@/assets/img/新增.png" alt="" style="width: 20px; cursor: pointer" v-if="chapter.expanded"
                @click="addSection(chapter.id)" />
            </span>
          </li>
          <ul v-if="chapter.expanded" class="sections">
            <li v-for="section in chapter.sections" :key="section.sectionId">
              <span style="cursor: pointer" @click="sectionId(section.sectionId, chapter.id)"
                :class="{ nowselect: section.sectionId == sectionidd }"> {{ section.sectionName }}</span>
              <span>
                <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
                  :title="delName" @confirm="confirmEvent(section.sectionId)" @cancel="cancelEvent">
                  <template #reference>
                    <!-- <img src="@/assets/img/删除.png" alt="" style="width: 16px;cursor: pointer;"> -->
                    <el-button type="danger" :icon="Delete" circle style="width: 18px; height: 18px"
                      @click="delName = '确认删除本小节吗?'" />
                  </template>
                </el-popconfirm>
              </span>
            </li>
          </ul>
        </ul>
      </div>
    </div>
  </div>

<!-- 上一个版本的基本信息 -->
  <div class="right1f" v-if="!isShow" :style="{ height: height1 + 'px' }">
    <!-- 添加了一个章节的修改 -->
    <div class="titles">
      <div> <input type="text" v-model="course.courseName" class="caption"> </div>
        <button @click="cscscs()" class="recises">修改</button>
    </div>
    <div class="up">
      <div class="info">
        <span>课程时长</span>
        <div class="kss">
          <input type="text" class="input"  v-model="courseTime" style="font-size: 16px" />
          <div class="one" style="background-color: #efefef4d">课时</div>
        </div>
      </div>
      <div class="info">
        <span>视频时长统计</span>
        <div class="kss">
          <input type="text" class="input" v-model="videoTime" disabled style="font-size: 16px" />
          <div class="one" style="background-color: #efefef4d">小时</div>
        </div>
      </div>
    </div>
    <div class="up">
      <div class="info">
        <span>专业方向</span>
        <!-- <div class="ks">
          <input type="text" class="input" />
        </div> -->
        <el-input v-model="textarea2" style="
            width: 300px;
            font-size: 16px;
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 5px;
          " :autosize="{ minRows: 1.2, maxRows: 3 }" type="textarea" disabled />
      </div>
      <div class="info">
        <span>专业课程</span>
        <div class="kss">
          <input style="font-size: 16px" type="text" class="input" disabled  v-model="professionalName" />
        </div>
      </div>
    </div>

    <div class="text">
      <span style="margin-left: 10px">课程简介：</span>
      <textarea name="" id="" v-model="course.courseInfo" ></textarea>
    </div>
  </div>











  <div class="manager" v-if="isShow" :style="{ height: height1 + 'px' }">
    <div class="upload-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M16 16v1.999l1.414-1.415L19 19l-5-5-5 5 1.414-1.414L16 17.999V16zm3.001-7H3v-3h19v3zM3 5h18v3H3V5z" />
      </svg>
      <p>请在此上传本小节视频</p>
      <label class="upload-btn" for="scspan">上传视频</label>
      <input type="file" @change="uploadFile" id="scspan" multiple/>
      <div v-if="isUploading">
        正在上传: {{ currentFile.name }}...
        <progress :value="uploadProgress" max="100"></progress>
      </div>
    </div>
    <div class="upload-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M16 16v1.999l1.414-1.415L19 19l-5-5-5 5 1.414-1.414L16 17.999V16zm3.001-7H3v-3h19v3zM3 5h18v3H3V5z" />
      </svg>
      <p>请在此管理本小节课件</p>
      <label for="kejian" class="upload-btn">上传课件</label>
      <input type="file" @change="uploadFile1" id="kejian" />
      <div v-if="isUploading1">
        正在上传: {{ currentFile1.name }}...
        <progress :value="uploadProgress1" max="100" style="margin:auto"></progress>
      </div>
    </div>
    <div class="upload-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M16 16v1.999l1.414-1.415L19 19l-5-5-5 5 1.414-1.414L16 17.999V16zm3.001-7H3v-3h19v3zM3 5h18v3H3V5z" />
      </svg>

      <p>请在此管理本小节资料</p>
      <label for="kczl" class="upload-btn">上传资料</label>
      <input type="file" @change="uploadFile2" id="kczl" />
      <div v-if="isUploading2" class="upload">
        正在上传: {{ currentFile2.name }}...
        <progress :value="uploadProgress2" max="100" style="margin:auto"></progress>
      </div>
    </div>

    <div class="upload-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M16 16v1.999l1.414-1.415L19 19l-5-5-5 5 1.414-1.414L16 17.999V16zm3.001-7H3v-3h19v3zM3 5h18v3H3V5z" />
      </svg>
      <p>请在此管理此小节作业</p>
      <label class="upload-btn" @click="push1(pushModel, courId)">新增作业</label>
      <div id="progress-bar">
        <div id="barkj"></div>
      </div>
    </div>
  </div>

  <el-drawer size="600" v-model="drawer" title="I am the title" :with-header="false">
    <span style="font-size: 22px">管理小节</span>
    <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="视频管理" name="first">
        <el-empty description="暂无内容" v-if="showContent" />
        <el-table :data="tableData" style="width: 100%" v-else>
          <el-table-column label="视频名称" width="180">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>名字: {{ scope.row.videoName }}</div>
                  <div>路径: {{ scope.row.videoPath }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.videoName }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="管理">
            <template #default="scope">
              <el-button size="default" type="danger" @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="课件管理" name="second">
        <el-empty description="暂无内容" />
      </el-tab-pane>
      <el-tab-pane label="资料管理" name="third">
        <el-empty description="暂无内容" />
      </el-tab-pane>
      <el-tab-pane label="作业管理" name="fourth">
        <el-empty description="暂无内容" />
      </el-tab-pane>
    </el-tabs> -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="视频管理" name="first">
        <el-empty description="暂无内容" v-if="showContent" />
        <el-table :data="splb" style="width: 100%" v-else>
          <el-table-column fixed prop="videoName" label="视频名称" width="400" />
          <el-table-column fixed="right" label="操作" min-width="100">
            <template #default="splb">
              <el-button link type="primary" size="small" @click="scsp(splb.row.videoId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="课件管理" name="second">
        <el-empty description="暂无内容" v-if="showContent" />
        <el-table :data="kjlb" style="width: 100%" v-else>
          <el-table-column fixed prop="coursewareName" label="课件名称" width="400" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="kjlb">
              <el-button link type="primary" size="small" @click="sckj(kjlb.row.coursewareId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="资料管理" name="third">
        <el-empty description="暂无内容" v-if="showContent" />
        <el-table :data="zllb" style="width: 100%" v-else>
          <el-table-column fixed prop="infoName" label="资料名称" width="400" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="zllb">
              <el-button link type="primary" size="small" @click="sczl(zllb.row.infoId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="作业管理" name="fourth">
        <el-empty description="暂无内容" v-if="showContent" />
        <el-table :data="zylb" style="width: 100%" v-else>
          <el-table-column fixed prop="taskName" label="作业名称" width="400" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="zylb">
              <el-button link type="primary" size="small" @click="sczy(zylb.row.taskId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>

  <el-dialog v-model="dialogFormVisible" :title="chapterName" width="500" style="z-index: 100">
    <el-form :model="form">
      <el-form-item :label="inputName" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button style="width: 50px" @click="dialogFormVisible = false, cancle()">取消</el-button>
        <el-button style="width: 50px" type="primary" @click="(dialogFormVisible = false), confirm()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.upload {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.chapterstyle {
  color: #eb4408;
}

.top {
  position: fixed;
  top: 53px;
  width: 97%;
  height: 75px;
  // background-color: antiquewhite;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border: 1px red solid;
    .text {
       width: 250px;
        height: 70px;
    // background-color: aquamarine;
    //margin-left: 40px;
      display: flex;
       justify-content: space-around;
      align-items: center;

      .back {
        width: 20px;
        height: 20px;
        //   background-color: bisque;
        cursor: pointer;

        img {
         width: 100%;
        }
    }

    .edit {
      width: 20px;
      height: 20px;
      //   background-color: bisque;
      cursor: pointer;

      img {
        width: 100%;
      }
    }

    .switch {
      width: 20px;
      height: 20px;
      //   background-color: bisque;
      cursor: pointer;

      img {
        width: 100%;
      }
    }

    span {
      height: 70px;
      line-height: 70px;
      font-size: 18px;
      font-weight: bold;
    }

    img:hover {
      opacity: 0.5;
    }
  }

  .button {
    margin-right: 60px;

    .add {
      background-color: #eb4408;
      color: white;
    }

    .add:hover {
      background-color: #eb4408;
      opacity: 0.7;
    }

    .del:hover {
      border: 1px solid rgba(255, 0, 0, 0.4);
      color: #eb4408;
    }
  }

  button {
    width: 100px;
    height: 35px;
    margin-left: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 16px;
    cursor: pointer;
    background-color: #fff;
  }
}

.left {
  position: fixed;
  top: 130px;
  width: 400px;
  // height: 70%;
  height: 615px;
  // background-color: aquamarine;
  // border-right: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 20px;
  overflow-y: scroll;
  margin-right: 10px;
  margin-top: 10px;

  .title {
    z-index: 10;
    height: 30px;
    background-color: #fff;
    display: flex;
    align-items: center;
    // padding-left: 20px;
    // margin-left: 20px;
    cursor: pointer;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);

    img {
      height: 70%;
    }

    span {
      height: 30px;
      line-height: 30px;
      margin-left: 6px;
    }
  }
}

.right1f {
  position: fixed;
  top: 127px;
  right: 30px;
  float: right;
  width: 65%;
  // height: 625px;
  // background-color: white;
  // padding-top: 40px;
  margin-top: 10px;
  // border-left: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: wrap;
  // align-items: center;
  // justify-items: center;

  .up {
    width: 80%;
    height: 100px;
    // background-color: aquamarine;
    margin: 20px 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .info {
      width: 400px;
      height: 80px;
      // background-color: blueviolet;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding-left: 20px;

      .ks {
        width: 300px;
        height: 40px;
        background-color: #fff;
        display: flex;
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        padding-left: 5px;
        align-items: center;

        .one {
          width: 45px;
          height: 30px;
          line-height: 30px;
          background-color: #fff;
          border: 0;
        }

        input {
          width: 240px;
          height: 30px;
          border: 0;
          outline: rgba(255, 14, 14, 0.85);
          padding-left: 12px;
          border-right: none;
        }
      }

      .kss {
        width: 300px;
        height: 40px;
        background-color: #efefef4d;
        display: flex;
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        // padding-left: 5px;
        align-items: center;

        .one {
          width: 45px;
          height: 30px;
          line-height: 30px;
          background-color: #fff;
          border: 0;
        }

        input {
          width: 240px;
          height: 30px;
          border: 0;
          outline: rgba(255, 14, 14, 0.85);
          padding-left: 12px;
          border-right: none;
        }

        // input:hover {
        //   border: 1px solid rgba(255, 14, 14, 0.85);
        // }
      }

      .ks:hover {
        border: 1px solid #eb4408;
      }
    }
  }

  .text {
    width: 90%;
    height: 400px;
    margin: 20px 20px;

    textarea {
      width: 100%;
      height: 200px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      outline: none;
      margin-top: 20px;
      padding-left: 15px;
      padding-top: 20px;
      font-size: 18px;
    }

    // textarea:hover {
    //   border: 1px solid #eb4408;
    // }
  }
}

.manager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: fixed;
  top: 127px;
  right: 30px;
  float: right;
  width: 70%;
  // height: 625px;
  // background-color: chocolate;
  // padding-top: 40px;
  margin-top: 10px;
  // border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.upload-container {
  width: 35%;
  height: 40%;
  margin-top: 20px;
  margin-left: 50px;
  background: rgba(255, 255, 255, 0.8);
  width: 450px;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.upload-container svg {
  width: 6rem;
  height: 6rem;
  fill: #ff5e56;
}

.upload-container input[type="file"] {
  display: none;
}

.upload-container .upload-btn {
  border: none;
  outline: none;
  background: #ff5e56;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.upload-container .upload-btn:hover {
  background: #ff0000;
}

.upload-container .file-info {
  color: #ff5e56;
  font-weight: bold;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.arrow {
  margin-left: 5px;
}

.custom-tree-container {
  padding-left: 20px;

  ul {
    margin-top: 15px;

    .delSection {
      float: right;
      margin-right: 10px;
      // margin-top: 3px;
    }

    .addSection {
      float: right;
      margin-right: 10px;
    }

    .sections {
      margin-top: 7px;

      li {
        list-style: none;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        span {
          margin-right: 30px;
        }
      }
    }
  }
}

#progress-bar {
  width: 50%;
  background-color: #f3f3f3;
  margin: 0 auto;
}

#bar {
  height: 20px;
  background-color: #eb4408;
  width: 0%;
}

#barkj {
  height: 20px;
  background-color: #eb4408;
  width: 0%;
}

#barzl {
  height: 20px;
  background-color: #eb4408;
  width: 0%;
}

#barzy {
  height: 20px;
  background-color: #eb4408;
  width: 0%;
}

.nowselect {
  color: #ff3f3f;
}
.titles{
  width: 100%;
  //弹性布局
  display: flex;
  flex-direction: row;
  justify-content: space-between;
   .caption{
      width: 500px;
      height: 40px;
      font-size: 20px;
      font-weight: bold;
      // 清除文本框边框
      border: none;
      // 清除点击后的文本框的边框
      outline: none;
    }
    .recises{
      color: #f2eded;
      background-color: #eb4408;
      border: none;
      outline: none;
      width: 50px;
      height: 25px;
      border-radius: 12px;
    }
}
</style>>